<!--
 * @Author: your name
 * @Date: 2021-07-31 10:02:11
 * @LastEditTime: 2021-07-31 15:36:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \GoodsManagement\src\pages\PermissionsList.vue
-->
<template>
  <div class="app">
    <n-card>
      <n-data-table :columns="columns" :data="data" :single-line="false">
      </n-data-table>
    </n-card>
  </div>
</template>
<script lang="ts">
import { NCard, NDataTable, NTag } from "naive-ui";
import { permissionsArray } from "../commonLogical/rolePermissions/rolePermissionsLogical";
import { ref, h } from "vue";

const columns = [
  {
    title: "#",
    key: "id",
  },
  {
    title: "权限名称",
    key: "name",
  },
  {
    title: "路径",
    key: "path",
  },
  {
    title: "权限等级",
    key: "level",
    render(row: { level: number }) {
      if (row.level === 1) {
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: "info",
          },
          {
            default: () => "一级",
          }
        );
      }
      if (row.level === 2) {
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: "success",
          },
          {
            default: () => "二级",
          }
        );
      }
      if (row.level === 3) {
        return h(
          NTag,
          {
            style: {
              marginRight: "6px",
            },
            type: "warning",
          },
          {
            default: () => "三级",
          }
        );
      }
    },
  },
];

let data = ref(permissionsArray);
export default {
  components: {
    NCard,
    NDataTable,
    NTag,
    h,
  },
  setup() {
    return {
      data,
      columns,
    };
  },
};
</script>
<style></style>
